<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@taglib prefix="s" uri="/struts-tags"%> 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title><s:property value="#request.RuntimeTopic.topicName"/></title>

    <link rel="stylesheet" type="text/css" href="style.css">
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">   
  </head>
  <body style="background-color: #FFFACD;">  	
  	<div class="container">
  		<header>
  			<center><img class="img-responsive" src="getLogoInputStream?topicid=<s:property value="#request.RuntimeTopic.topicId"/>" length="330px" width="330px"></center>
  		</header>
	    <div class="nav">
	    	<h1 class="text-center"><s:property value="#request.RuntimeTopic.topicName"/></h1>
	    	<h3 class="text-center"><s:property value="#request.RuntimeTopic.topicDescription"/></h3>
	    	<%-- <h4 class="text-center"><s:property value="#request.RuntimeTopic.logoName"/></h4> --%>
	    	<div class="row">
	    		<div class="col-xs-1"></div>
	  			<div class="col-xs-5"><a href="RuntimeTopic"><img class="img-responsive" src="img/nav-txt1.png" alt=""></a></div>
	  			<div class="col-xs-5"><a href="resultServlet"><img class="img-responsive" src="img/nav-txt2.png" alt=""></a></div>
	  			<div class="col-xs-1"></div>
			</div>
	    </div>
	    <div class="nav-btm"></div>
	    	<table class="table table-striped">
		    	<thead>
		    		<tr>
		    			<th>
		    			内容详情
		    			</th>
		    		</tr>
		    	</thead>
		    	 <s:iterator value="#request.RuntimeContentList" status="statu">
			    	<tbody>
			    		<tr>
			    			<td>
			    				<s:property value="#statu.index"/>&nbsp;&nbsp;<s:property value="contentName"/>
			    			</td>
			    		</tr>
			    		<tr>
			    			<td>
			    				概要：<s:property value="contentAbstract"/>
			    			</td>
			    		</tr>
			    		<tr>
			    			<td>
			    				详情：<s:property value="contentDetail"/>
			    			</td>
			    		</tr>
			    		<tr>
			    			<td>
			    				<img class="img-responsive" src="getPicOutputStream?contentid=<s:property value="contentId"/>" length="330px" width="330px">
			    			</td>
			    		</tr>
			    	</tbody>	 	
  		    	 </s:iterator>
    		</table>
	   
	    <h4>请选择</h4>
	    <form method="post" action="">
	    	<table class="table table-striped">
	    		<s:iterator value="#request.RuntimeContentList" status="statu">
		    		<tr>
		    			<td>
		    				<input type="checkbox" id="choosed" name="choosed" value="<s:property value="contentId"/>"/>
		    			</td>
		    			<td>
		    				<s:property value="#statu.index"/>&nbsp;&nbsp;<s:property value="contentName"/>
		    			</td>
		    		</tr>
	    		</s:iterator>
	    		<input type="submit" value="投票"/>
	    	</table>	   
		</form>
		  <div class="form-group">
		    <label for="exampleInputName1">姓名</label>
		    <input type="text" class="form-control" id="userName" name="userName"  placeholder="请输入您的姓名">
		  </div>
		  <div class="form-group">
		    <label for="exampleInputName2">学号</label>
		    <input type="text" class="form-control" id="userID" name="userID" placeholder="请输入您的学号">
		  </div>
		  <div class="form-group">
		    <label for="exampleSelect">学院</label>
		    <select class="form-control" id="userCollege" name="userCollege">
		    	<option>— —</option>
                <option>经济学院</option>
				<option>法学院</option>
				<option>文学与新闻学院</option>
                <option>外国语学院</option>
                <option>艺术学院</option>
                <option>历史文化旅游学院</option>
                <option>数学学院</option>                            　  　
                <option>物理科学与技术学院</option>
                <option>化学学院</option>
                <option>生命科学学院</option>
                <option>电子信息学院</option>
                <option>材料科学与工程学院</option>
                <option>制造科学与工程学院</option>
                <option>电气信息学院</option>
                <option>计算机学院</option>
                <option>软件学院</option>
                <option>建筑与环境学院</option>
                <option>水利水电学院</option>
                <option>化学工程学院</option>
                <option>轻纺与食品学院</option>
                <option>高分子科学与工程学院</option>
                <option>华西基础医学与法医学院</option>
                <option>华西临床医学院</option>
                <option>华西口腔医学院</option>
                <option>华西公共卫生学院</option>
                <option>华西药学院</option>
                <option>公共管理学院</option>
                <option>商学院</option>
                <option>马克思主义学院</option>
                <option>体育学院</option>
                <option>灾后重建与管理学院</option>
                <option>空天科学与工程学院</option>
                <option>匹兹堡学院</option>
                <option>网络空间安全学院</option>
				<option>国重、中心、所等</option>
            </select>                        
		  </div>
		<!--    <div class="form-group">
		    <label for="exampleInputName3">学院</label>
		    <input type="text" class="form-control" id="userCollege" name="userCollege" placeholder="请输入您的学院">
		  </div>-->
		  <div class="form-group">
		    <label for="exampleInputName4">联系方式</label>
		    <input type="text" class="form-control" id="userPhoneNumber" name="userPhoneNumber" placeholder="请输入您的联系方式">
		  </div>		
		  <div class="text-center">
		  	<button type="button" onclick="checkEmpty()"class="btn btn-info">&nbsp;&nbsp;投&nbsp;票&nbsp;&nbsp;</button>
		  </div>		  
		</form>
			
		<br>
		<div class="content">
			<img class="img-responsive" src="img/con-tit.png" alt="">
			<div class="con" style="color: #818181">
				<h4>shuoming说明</h4>
       		    <p>shuoming说明 shuoming说明 shuoming说明 shuoming说明</p>

       		    <h4>shuoming说明</h4>
       		    <p>shuoming说明 shuoming说明 shuoming说明 shuoming说明</p>

       		    <h4>shuoming说明</h4>
       		    <p>shuoming说明 shuoming说明 shuoming说明 shuoming说明</p>
			</div>
		</div>
		<footer>
			<img class="img-responsive" src="img/foot.png" alt="">
		</footer>
	</div>
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>
<script type="text/javascript">
var error = "<%=request.getAttribute("error") %>";
if(error=="null"){
}else{
	alert(error);
}

var isVote = "<%=request.getAttribute("poster1") %>";
if(isVote=="null"){
}else{
	document.getElementById("poster1").value="<%=request.getAttribute("poster1") %>";
	document.getElementById("poster2").value="<%=request.getAttribute("poster2") %>";
	document.getElementById("poster3").value="<%=request.getAttribute("poster3") %>";
	document.getElementById("poster4").value="<%=request.getAttribute("poster4") %>";
	document.getElementById("poster5").value="<%=request.getAttribute("poster5") %>";
	document.getElementById('userName').value="<%=request.getAttribute("userName") %>";
	document.getElementById("userID").value="<%=request.getAttribute("userID") %>";
	document.getElementById("userCollege").value="<%=request.getAttribute("userCollege") %>";
	document.getElementById("userPhoneNumber").value="<%=request.getAttribute("userPhoneNumber") %>";	
}
</script>
<script type="text/javascript">
	function checkEmpty(){
		var flag=true;
		for(var i =0;i<5;i++){
			var strPoster = document.getElementById("poster"+i);
			if(strPoster==""){
				flag = false;
			}
		}
		var strName = document.getElementById('userName').value;
		var strID = document.getElementById('userID').value;
		var strCollege = document.getElementById('userCollege').value;
		var strPhoneNumber = document.getElementById('userPhoneNumber').value;
		if(!flag ||(strName == "" || strID == "" || strCollege == "" || strPhoneNumber =="")){

			alert("请填写所有选项");
		}
		else{
			checkCelNumber();
		}
	}

	function checkCelNumber(){
		var str = document.getElementById('userPhoneNumber').value;
		var pattern = /\d{11}/;
		if(pattern.test(str)){
			checkDuplicated();
		}else{
			alert('电话号码格式不正确');
		}

	}
	
	function checkDuplicated(){
		var posterID = new Array;
		var flag= false;
		posterID[0] = document.getElementById('poster1').value;
		posterID[1] = document.getElementById('poster2').value;
		posterID[2] = document.getElementById('poster3').value;
		posterID[3] = document.getElementById('poster4').value;
		posterID[4] = document.getElementById('poster5').value;
		for(var i=0;i<5;i++){
			for(var j=0;j<5;j++){
				if(i!=j){
					if(posterID[i]==posterID[j]){
						flag = true;
						break;
					}
				}		
			}
		}
		if(flag){
			alert("海报名重复!");
		}else{
			document.getElementById('form1').submit();
		}
	}
	
</script>